{% extends "layouts/base.html" %}
{% load static %}

{% block title %} 首页 {% endblock %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
    <!-- [ Main Content ] start -->
    <div class = "pcoded-main-container">
        <div class = "pcoded-content">
            <!-- [ breadcrumb ] start -->
            <!-- <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h5 class="m-b-10">Dashboard Analytics</h5>
                            </div>
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="#!">Dashboard Analytics</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- [ breadcrumb ] end -->
            <!-- [ Main Content ] start -->
            <div class = "row">
                <!-- -->
                <!-- 统计页面开始 -->
                <!--页首卡片开始 -->
                <div class = "col-md-6 col-xl-3">
                    <div class = "card bg-c-blue order-card">
                        <div class = "card-body">
                            <h4 class = "text-white">员工</h4>
                            <br>
                            <h5 class = "text-right text-white">
                                <i class = "feather icon-users float-left"></i><span
                                    class = "float-left">在职人员</span><span>{{ total_employees }}</span></h5>
                        </div>
                    </div>
                </div>
                <div class = "col-md-6 col-xl-3">
                    <div class = "card bg-c-green order-card">
                        <div class = "card-body">
                            <h4 class = "text-white">工序</h4>
                            <br>
                            <h5 class = "text-right text-white">
                                <i class = "feather icon-tag float-left"></i><span
                                    class = "float-left">工序数量</span><span>{{ total_process }}</span></h5>
                        </div>
                    </div>
                </div>
                <div class = "col-md-6 col-xl-3">
                    <div class = "card bg-c-yellow order-card">
                        <div class = "card-body">
                            <h4 class = "text-white">昨日工时总数</h4>
                            <br>
                            <h5 class = "text-right text-white">
                                <i class = "feather icon-sun float-left"></i><span>{% if yesterday_hours.e_hours__sum == None %}
                                0
                                {% else %}{{ yesterday_hours.e_hours__sum }}
                            {% endif %} 小时</span>
                            </h5>
                        </div>
                    </div>
                </div>
                <div class = "col-md-6 col-xl-3">
                    <div class = "card bg-c-red order-card">
                        <div class = "card-body">
                            <h4 class = "text-white">本月工时总数</h4>
                            <br>
                            <h5 class = "text-right text-white">
                                <i class = "feather icon-sun float-left"></i><span>{{ month_hours.e_hours__sum }}小时</span>
                            </h5>
                        </div>
                    </div>
                </div>
                <!--页首卡片结束 -->
                <!--各工序员工数量柱图 开始 -->
                <div class = "col-md-12 col-xl-12">
                    <div class = "card">
                        <div class = "card-header text-center">
                            <h3 class = "text-c-blue">工序员工数量</h3>
                        </div>
                        <div class = "card-body pl-0 pb-0 text-center">
                            <div class = "text-center" id = "process-employees-echart"
                                 style = "height:400px;"></div><!-- 必须要定义高度，否则不显示内容-->
                        </div>
                    </div>
                </div>
                <!--各工序员工数量柱图 结束 -->
                <!-- 统计页面结束 -->
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </div>
    <!-- [ Main Content ] end -->

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
    <!-- echarts图表导入 -->
    <script src = "{% static 'echarts@5.2.2/echarts.min.js' %}"></script>
    <script>
        // 柱状图
        //data1:柱状图各项名称，data2:各项的值
        function show_bar(data1, data2) {
            //控件
            var bar_widget = echarts.init(document.getElementById('process-employees-echart'),null,{renderer:'svg'});   //对图表使用svg方式渲染

            //设置option
            option = {
                title: {
                    text: ''
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    type: 'category',
                    data: data1
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data2,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    label: {
                        normal: {
                            position: 'inside',
                            distance: 10,
                            show: true,
                            fontSize: 18,
                        }
                    }
                }]
            };
            bar_widget.setOption(option)
        }

        //显示即加载调用
        window.onload = function () {
            //添加csrf校验数据:POST方式请求数据必须要添加csrf校验数据
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
            });

            //发送post请求，地址为index（Jquery）
            $.ajax({
                url: "{% url 'index' %}",
                type: "POST",
                data: {},
                success: function (data) {
                    // 柱状图
                    show_bar(data['bar_items'], data['bar_datas']);

                    //后端返回的结果
                    console.log(data)
                }
            })
        }
    </script>

{% endblock javascripts %}
